<script setup>
import { ref } from 'vue'
import * as Cesium from 'cesium'
import ToggleSetting from './ToggleSetting.vue'
import ToggleEmergency from './ToggleEmergency.vue'

const tianditutk = '75f1cc913e8d68f7bd4b6f6383f78ceb'
const activeIndex = ref(2)
const isBaseSettingShow = ref(false)
const isEmergencyShow = ref(false)
const baseType = ref('image')
const toggleType = ref('image')
const emergencyList = ['消防站', '监控摄像头', '避难场所', '应急物资仓库', 
  '防汛物资存放处', '电子围栏']
// 打开底图设置界面
const openBaseSetting = (type) => {
  toggleType.value = type
  isBaseSettingShow.value = true
}
// 打开应急设施界面
const openEmergency = () => {
  isEmergencyShow.value = true
}
// 切换默认底图
const changeBaseLayer = (type) => {
  baseType.value = type
  window.viewer.scene.imageryLayers.remove(window.baseLayer)
  switch (type) {
    case 'image':
      window.baseLayer = new Cesium.UrlTemplateImageryProvider({
        url: 'http://t1.tianditu.com/img_w/wmts?layer=img&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=' + tianditutk
      })
      window.viewer.imageryLayers.addImageryProvider(window.baseLayer)
      break
    case 'vector':
      window.baseLayer = new Cesium.UrlTemplateImageryProvider({
        url: 'http://t1.tianditu.com/vec_w/wmts?layer=vec&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=' + tianditutk
      })
      window.viewer.imageryLayers.addImageryProvider(window.baseLayer)
      break
    case 'terrain':
      window.baseLayer = new Cesium.UrlTemplateImageryProvider({
        url: 'http://t1.tianditu.com/ter_w/wmts?layer=ter&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=' + tianditutk
      })
      window.viewer.imageryLayers.addImageryProvider(window.baseLayer)
      break
  }
}
</script>

<template>
  <div class="toggle-control">
    <div class="toggle-button-list">
      <div class="toggle-button" @click="activeIndex = 0" :class="{ active: activeIndex === 0 }">地理信息数据</div>
      <div class="toggle-button" @click="activeIndex = 1" :class="{ active: activeIndex === 1 }">地图标绘</div>
      <div class="toggle-button" @click="activeIndex = 2" :class="{ active: activeIndex === 2 }">底图管理</div>
      <div class="toggle-button" @click="activeIndex = 3" :class="{ active: activeIndex === 3 }">业务图层管理</div>
    </div>
    <div class="toggle-panel">
      <div v-if="activeIndex === 2">
        <div class="toggle-panel-item">
          <input type="checkbox" name="image" value="image"
          :checked="baseType === 'image'">天地图影像</input>
          <button @click="openBaseSetting('image')">底图设置</button>
        </div>
        <div class="toggle-panel-item">
          <input type="checkbox" name="vector" value="vector"
          :checked="baseType === 'vector'">天地图矢量</input>
          <button @click="openBaseSetting('vector')">底图设置</button>
        </div>
        <div class="toggle-panel-item">
          <input type="checkbox" name="terrain" value="terrain"
          :checked="baseType === 'terrain'">天地图地形</input>
          <button @click="openBaseSetting('terrain')">底图设置</button>
        </div>
      </div>
      <div v-if="activeIndex === 3">
        <div class="toggle-emergency-title">
          应急设施
        </div>
        <div class="toggle-emergency-item" v-for="(item, index) in emergencyList"
        :key="index">
          <input type="checkbox" :name="item" :value="item" />
          {{ item }}
          <button @click="openEmergency">设置</button>
        </div>
      </div>
    </div>
  </div>
  <toggle-setting 
  v-if="isBaseSettingShow"
  :baseType="toggleType"
  @changeBaseLayer="changeBaseLayer"
  @closeSetting="isBaseSettingShow = false"
  >
  </toggle-setting>
  <toggle-emergency
  v-if="isEmergencyShow"
  >
  </toggle-emergency>
</template>

<style lang="scss">
.toggle-control {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  width: 400px;
  height: 500px;
  display: grid;
  grid-template-columns: 80px 1fr;

  .toggle-button-list {
    margin-top: 40px;

    .toggle-button {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ccc;
      text-align: center;
      color: #fff;
      width: 70px;
      height: 60px;
      border-radius: 3px;
      margin-bottom: 30px;
      cursor: pointer;

      &.active {
        background-color: rgb(48, 106, 129);
      }
    }
  }

  .toggle-panel {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    margin-top: 40px;
    padding: 20px auto;
    height: 90%;
    background-color: #fff;

    .toggle-panel-item {
      margin-top: 10px;
    }

    .toggle-emergency-title {
      font-size: 25px;
      font-weight: bold;
    }

    .toggle-emergency-item {
      margin-top: 10px;
    }
  }
}
</style>
